import React, { Component } from "react";
import echarts from "echarts";
import styles from "./style.less";
import {ActiveRingChart} from '@jiaminghi/data-view-react'
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      windowHeight: 0
    };
  }
  componentDidUpdate(nextProps,nextState){
    if(this.props!=nextProps){
        this.deviceInit();
    }
  }
  deviceInit=()=>{
    let device = deviceDetails(this.props.regionProportion)
    const data= device.filter(obj=>{return obj.value})    
    this.setState({
        config:{
          radius: `60%`,
          activeRadius: '55%',
            data: data,
            digitalFlopStyle: {
              fontSize: 25
            },
            showOriginValue: true,
            lineWidth:[60]
        }
    })
  }

  render() {
    return (
      <div className={styles.div_body}>
          <div className={styles.div_body_title}>
              <h3>告警占比</h3>
          </div>
          <div className={styles.div_body_connect}>
            <ActiveRingChart config={this.state.config}  className={styles.activeRingChart}/>
          </div>
      </div>
    );
  }
}

export default Index;
function  deviceDetails(arry = []) {
  let newdata = [];
  for (let i = 0; i < arry.length; i++) {
    let obj = {};
    obj.value = arry[i].total;
    obj.name = arry[i].regionName;
   
    newdata.push(obj);
  }
  return newdata;
}
